<script lang="ts" setup>
import { House, ArrowRight } from "@element-plus/icons-vue";
import { reactive, ref } from "vue";
import createAxios from "../request";
import { attendList } from "../model/index";
import { onMounted } from "vue";
import userStore from "../store/UserStore";
import { ElMessage } from "element-plus";
let store = userStore();
let axios = createAxios();
let empno = store.getEmpno;
let list1: Array<attendList> = [];

let tableData = reactive({
  list: list1,
  currentPage: 1,
  pageSize: 15,
  total: 0,
});

let currentDate = new Date();
const year = ref(currentDate.getFullYear());
const month = ref(currentDate.getMonth() + 1);

onMounted(() => {
  getData();
});

const getData = function () {
  axios({
    url: `/getAttendList`,
    method: "POST",
    data: { empno: empno, year: year.value, month: month.value },
  })
    .then((res) => {
      //请求成功
      tableData.list = res.data;
      tableData.total = tableData.list.length;
      console.log(tableData.list);
      console.log(year);
      console.log(month);
    })
    .catch((err) => {
      //请求失败
      ElMessage.error("请求考勤记录失败");
    });
};

let gotoFirst = function () {
  tableData.currentPage = 1;
};

const handlePageChange = (val: any) => {
  tableData.currentPage = val;
};

const temp = currentDate.getFullYear();
const years = [
  {
    value: temp - 1,
    label: temp - 1,
  },
  {
    value: temp,
    label: temp,
  },
];

let yearchange = function () {
  
  getData();
};

const months = [
  { value: 1, label: "一月" },
  { value: 2, label: "二月" },
  { value: 3, label: "三月" },
  { value: 4, label: "四月" },
  { value: 5, label: "五月" },
  { value: 6, label: "六月" },
  { value: 7, label: "七月" },
  { value: 8, label: "八月" },
  { value: 9, label: "九月" },
  { value: 10, label: "十月" },
  { value: 11, label: "十一月" },
  { value: 12, label: "十二月" },
];

let monthchange = function () {
 
  getData();
};
</script>

<template>
  <el-container id="mainView">
    <el-header
      style="
        background-color: #272822;
        color: #e5e5e5;
        line-height: 60px;
        font-size: 27px;
      "
      >月度出勤记录</el-header
    >
    <el-footer
      style="
        height: 30px;
        line-height: 30px;
        background-color: #4e5246;
        border-bottom: 1px solid #7a7a7a;
        border-top: 1px solid #7a7a7a;
      "
    >
      <el-breadcrumb :separator-icon="ArrowRight" style="line-height: 30px">
        <el-breadcrumb-item :to="{ path: '/home/homepage' }"
          ><el-icon> <House /> </el-icon>首页</el-breadcrumb-item
        >
        <el-breadcrumb-item>时间管理</el-breadcrumb-item>
        <el-breadcrumb-item>月度出勤记录</el-breadcrumb-item>
      </el-breadcrumb>
    </el-footer>
    <el-main style="padding-bottom: 0%">
      <el-select
        v-model="year"
        placeholder="请选择年度"
        size="large"
        style="width: 200px; margin-bottom: 10px; background-color: #1d1e1f"
        @change="yearchange()"
      >
        <el-option
          v-for="item in years"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        /> </el-select
      >&nbsp;&nbsp;
      <el-select
        v-model="month"
        placeholder="请选择月份"
        size="large"
        style="width: 200px; margin-bottom: 10px; background-color: #1d1e1f"
        @change="monthchange"
      >
        <el-option
          v-for="item in months"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <div class="table">
        <el-table :data="tableData.list" border style="width: 96vw">
          <el-table-column prop="date" label="日期" />
          <el-table-column label="日期类型">
            <template #default="scope">
              <div v-if="scope.row.date_type == 1">工作日</div>
              <div v-else-if="scope.row.date_type == 2">休息日</div>
              <div v-else-if="scope.row.date_type == 3">法定假日</div>
              <div v-else-if="scope.row.date_type == 4">法定调休日</div>
            </template>
          </el-table-column>
          <el-table-column label="出勤情况">
            <template #default="scope">
              <div
                v-if="
                  scope.row.state == 1 ||
                  scope.row.state == 2 ||
                  scope.row.state == 9
                "
              ></div>
              <div v-else-if="scope.row.state == 0">无出勤</div>
              <div v-else-if="scope.row.state == 3">请假</div>
              <div v-else-if="scope.row.state == 4">正常出勤</div>
              <div v-else-if="scope.row.state == 5">迟到</div>
              <div v-else-if="scope.row.state == 6">早退</div>
              <div v-else-if="scope.row.state == 7">矿工</div>
              <div v-else-if="scope.row.state == 8">正常出勤--补签</div>
            </template>
          </el-table-column>
          <el-table-column label="上班时间">
            <template #default="scope">
              <div v-if="scope.row.restate == 1">{{ scope.row.t3 }}</div>
              <div v-else>{{ scope.row.t1 }}</div>
            </template>
          </el-table-column>
          <el-table-column label="下班时间">
            <template #default="scope">
              <div v-if="scope.row.restate == 1">{{ scope.row.t4 }}</div>
              <div v-else>{{ scope.row.t2 }}</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="display: flex; justify-content: flex-end">
        <el-button color="#262727" @click="gotoFirst">首页</el-button
        >&nbsp;&nbsp;
        <el-pagination
          @current-change="handlePageChange"
          background
          layout="prev, pager, next"
          :total="tableData.total"
          style="text-align: right"
          current-page="tableData.currentPage"
          :page-size="tableData.pageSize"
        />&nbsp;&nbsp;
      </div>
    </el-main>
  </el-container>
</template>

<style scoped>
#mainView {
  height: 100%;
  width: 100%;
}

.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}

.table {
  display: flex;
  justify-content: center;
}

.example-basic .el-date-editor {
  margin: 8px;
}
</style>
